<template>
    <div class="photo-container">
      <div class="rotate-box">
        <div class="front">
          <pre><code><span class="code_blue">console</span>(<span class="code_green">'my name is hen.'</span>);</code></pre>
        </div>
        <div class="back">
          <pre><code>
          <span class="code_purple">const</span> me<span class="code_blue"> = </span>{
            <span class="code_red">name</span>: <span class="code_green">'hen'</span>,
            <span class="code_red">email</span>: <span class="code_green">'hen128@qq.com'</span>,
            <span class="code_red">position</span>: <span class="code_green">'JavaScript'</span>,
            <span class="code_red">website</span>: <span class="code_green">'zengweihao.cn'</span>
          <span>}</span>
          </code></pre>
        </div>
      </div>
    </div>
</template>

<script>
// import about from '@/mock/about'
export default {
  name: 'About',
  data() {
    return {
    }
  },
}
</script>

<style scoped lang="scss">
.photo-container {
  perspective: 1200px;
  /* 透视视图 */
  width: 100%;
}

.rotate-box {
  position: relative;
  transform-style: preserve-3d;
  /* 3D 转换 */
  transition: all 0.8s ease;
  /* 转换效果持续 1秒 */
  height: 240px;
  width: 600px;
  margin: 80px auto;
}

.rotate-box:after {
  content: '';
  display: block;
  width: 100%;
  height: 120px;
  transform: rotateX(90deg);
  background-image: radial-gradient(
    ellipse closest-side,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  position: absolute;
  bottom: -140px;
}

.rotate-box > div {
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1c1c1c;
  box-shadow: 0 0 10px rgba(95, 95, 95, 0.4);
  border-radius: 3px;
  backface-visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
}

.back {
  transform: rotateY(180deg) translateZ(0.5px);
}

.photo-container:hover .rotate-box {
  transform: rotateY(-180deg);
}

/* code  标签*/
.code_purple {
  color: #ba68c8;
}

.code_blue {
  color: #29b6f6;
}

.code_green {
  color: #9ccc65;
}

.code_red {
  color: #ef5350;
}

@media screen and (max-width: 1200px) {
  .rotate-box {
    width: 100%;
  }
}
</style>